import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import '../scc/BuyerCenter.css';

// 履约服务账单组件
const ServiceBill = () => {
    return (
        <div className="service-bill">
            <h3>履约服务账单</h3>
            <div className="bill-amount">
                <p>总待缴费金额(CNY)</p>
                <p>¥286.00</p>
            </div>
            <button className="pay-button">缴费中的账单</button>
            <a href="#" className="pricing-link">计费标准说明</a>
        </div>
    );
};

// 店铺卡片组件
const StoreCard = ({ name, followers, onEnter }) => {
    const navigate = useNavigate();

    const handleEnter = () => {
        onEnter();
        navigate(`/shopping`);
    };

    return (
        <div className="store-card">
            <div className="store-icon"></div>
            <p>{name}</p>
            <p>{followers}人关注</p>
            <button className="enter-button" onClick={handleEnter}>进入</button>
        </div>
    );
};

// 广告组件
const Advertisement = () => {
    return (
        <div className="advertisement">
            <p>半托管重磅推出 邀您开店享红利！</p>
            <span className="tag">2024最大狗屁</span>
            <ul className="benefits">
                <li>0+广告费</li>
                <li>1+标签</li>
                <li>n+流量扶持</li>
            </ul>
            <button className="open-store-button">立即开店</button>
        </div>
    );
};

// 服务模块组件
const ServiceModule = ({ icon, title, items }) => {
    return (
        <div className="service-module">
            <div className="service-icon">{icon}</div>
            <h3>{title}</h3>
            <ul className="module-items">
                {items.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
        </div>
    );
};

// 添加店铺模态框组件
const AddStoreModal = ({ isOpen, onClose, onAddStore }) => {
    const [storeName, setStoreName] = useState('');
    const [followers, setFollowers] = useState('');
    const [error, setError] = useState('');

    const handleAddStore = () => {
        if (!storeName) {
            setError('请输入店铺名称');
            return;
        }

        if (!followers || isNaN(parseInt(followers))) {
            setError('请输入有效的关注人数');
            return;
        }

        onAddStore({
            name: storeName,
            followers: parseInt(followers)
        });

        setStoreName('');
        setFollowers('');
        setError('');
        onClose();
    };

    if (!isOpen) return null;

    return (
        <div className="modal-overlay">
            <div className="modal-content">
                <div className="modal-header">
                    <h3>添加店铺</h3>
                    <button className="close-button" onClick={onClose}>×</button>
                </div>
                <div className="modal-body">
                    {error && <div className="error-message">{error}</div>}
                    <div className="form-group">
                        <label>店铺名称:</label>
                        <input
                            type="text"
                            value={storeName}
                            onChange={(e) => {
                                setStoreName(e.target.value);
                                setError('');
                            }}
                            placeholder="请输入店铺名称"
                        />
                    </div>
                    <div className="form-group">
                        <label>关注人数:</label>
                        <input
                            type="number"
                            value={followers}
                            onChange={(e) => {
                                setFollowers(e.target.value);
                                setError('');
                            }}
                            placeholder="请输入关注人数"
                        />
                    </div>
                </div>
                <div className="modal-footer">
                    <button className="cancel-button" onClick={onClose}>取消</button>
                    <button className="confirm-button" onClick={handleAddStore}>添加</button>
                </div>
            </div>
        </div>
    );
};

// 本地存储工具函数
const STORE_KEY = 'myStores';

const saveStoresToLocalStorage = (stores) => {
    localStorage.setItem(STORE_KEY, JSON.stringify(stores));
};

const getStoresFromLocalStorage = () => {
    const stores = localStorage.getItem(STORE_KEY);
    return stores ? JSON.parse(stores) : [];
};

const BuyerCenter = () => {
    const [stores, setStores] = useState(getStoresFromLocalStorage());
    const [isModalOpen, setIsModalOpen] = useState(false);

    // 监听 stores 变化，保存到 localStorage
    useEffect(() => {
        saveStoresToLocalStorage(stores);
    }, [stores]);

    const handleAddStore = (newStore) => {
        setStores([...stores, newStore]);
    };

    const handleOpenModal = () => {
        setIsModalOpen(true);
    };

    const handleCloseModal = () => {
        setIsModalOpen(false);
    };

    return (
        <div className='App'>
            <div className="buyer-center">
                {/* 左侧区域 */}
                <div className="left-section">
                    <ServiceBill />
                    <Advertisement />
                </div>
                {/* 右侧区域 */}
                <div className="right-section">
                    {/* 我的店铺部分 */}
                    <div className="my-stores">
                        <div className='titleshopping'>
                            <h2>我的店铺</h2>
                            <span className='span1' onClick={handleOpenModal}>➕</span>
                        </div>

                        <div className="store-list">
                            {stores.length > 0 ? (
                                stores.map((store, index) => (
                                    <StoreCard
                                        key={index}
                                        name={store.name}
                                        followers={store.followers}
                                        onEnter={() => console.log(`进入店铺: ${store.name}`)}
                                    />
                                ))
                            ) : (
                                <div className="empty-store">暂无店铺，请点击"+"添加</div>
                            )}
                        </div>
                    </div>
                    {/* 服务模块部分 */}
                    <h2>服务</h2>
                    <div className="service-modules">
                        <ServiceModule
                            icon={<div className="heart-icon"></div>}
                            title="服务市场"
                            items={["ERP合规服务", "知识产权服务"]}
                        />
                        <ServiceModule
                            icon={<div className="shield-icon"></div>}
                            title="规则中心"
                            items={["仓储服务协议", "售后服务协议"]}
                        />
                        <ServiceModule
                            icon={<div className="book-icon"></div>}
                            title="卖家课堂"
                            items={["商品标签合规", "资质指引"]}
                        />
                    </div>
                </div>

                {/* 添加店铺模态框 */}
                <AddStoreModal
                    isOpen={isModalOpen}
                    onClose={handleCloseModal}
                    onAddStore={handleAddStore}
                />
            </div>
        </div>
    );
};

export default BuyerCenter;    